<template>
  <div style="width: 100% ;height: 100%;background-color: white;margin:auto">
    <div class="title">
      {{thisTitle}}
      <div style="display: flex;float: right;">
      <el-button type="primary" style="margin: 18px" @click="$router.push('/MyClass')">返回我的课程</el-button>
      </div>
    </div>
    <div>
      <div class="videoList">
        <span slot="title" style="font-size: 22px;">视频列表</span>
        <el-menu
            default-active="0"
            style="height: 95%;margin-top: 2px"
            background-color="#87CEFA"
            text-color="#fff"
            active-text-color="#F08080"
        >
          <el-menu-item v-for="(item,index) in videoList" :key="index" v-bind:index="index+''"
                        style=" border-top:1px solid black; border-bottom:1px solid black;
                        font-size: 22px;text-align: left;"
                        @click="setThisUrl(item)">
            第{{index+1}}节： {{titleList[index]}}
          </el-menu-item>
        </el-menu>
      </div>
      <div style="display: flex;float: left;width: 70%;margin-left:10px ;margin-top: 5px">
      <video id="videoElement" controls autoplay loop width="1200px" height="700px" ref="videoElement">
        暂无视频
      </video>
    </div>
    </div>
  </div>
</template>

<script>

import flvjs from 'flv.js'
export default {
  name: "ClassVideo",
  data(){
    return{
      videoClass:"",
      thisTitle:"",
      flvPlayer:null,
      videoList:[],
      titleList:[],
      thisUrl:"",
      player:null
    }
  },
  watch: {
    thisUrl() {
      if (this.player) {
        this.player.detachMediaElement();
        this.player.destroy();
      }
      this.show();
    }
  },
  methods:{
    setVideo(){
      this.videoClass=this.$route.query.classId;
      this.$axios.post('/getVideoList',{
        classId:this.videoClass
      }).then(res=>{
        this.videoList=res.data;
        if(this.videoList.length>0){
          for(var i=0;i<this.videoList.length;i++){
            if(this.videoList[i].videoName.length>10)
              this.titleList[i]=this.videoList[i].videoName.slice(0,10)+"...";
            else
              this.titleList[i]=this.videoList[i].videoName
          }
          this.thisTitle=this.videoList[0].videoName;
          this.thisUrl=this.videoList[0].videoUrl;
          console.log(this.thisUrl)
        }
      });
    },
    show(){
        const videoElement = this.$refs['videoElement'];
        this.player = flvjs.createPlayer({
          type: 'flv',
          url: this.thisUrl
        });
        this.player.attachMediaElement(videoElement);
        this.player.load();
        this.player.pause()
    },
    setThisUrl(item){
      this.thisUrl=item.videoUrl;
      this.thisTitle=item.videoName
    }

  },
  created() {

  },
  mounted() {
    this.setVideo();
    if(this.thisUrl!=='') {
      this.$nextTick(() => {
        this.show();
      });
    }

  }
}
</script>

<style scoped>
.title{
  height: 80px ;
  background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));
  line-height: 80px;
  font-size:32px;color: #2b333b;
  font-family: 微軟正黑體 Light;
}
.videoList{
  display: inline-block;
  float: right;
  width: 20%;
  height: 800px;
  margin-top: 5px;
  background-color: #1ec2af;
}
</style>
